{include file="public/header" /}
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab-content">
            <form id="employeeFormData" class="layui-form layui-form-pane" autocomplete="off">
                <input type="hidden" name="id" value="{$info.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" value="{$info.name}" class="layui-input" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">职位</label>
                    <div class="layui-input-block">
                        <select name="position" id="position">
                            <option value="">请选择职位</option>
                            {volist name="position" id="vo"}
                            <option value="{$vo.id}" {if $info.position == $vo.id} selected {/if}>{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-upload">
                        <label class="layui-form-label">照片</label>
                        <div class="layui-upload">
                            <div class="layui-input-block">
                                <div class="upload-frame {notempty name='info.photo'}upload-btn-hide{/notempty}" id="uploadCover">
                                    <i class="layui-icon layui-icon-addition"></i>
                                </div>
                                <div class="preview-box">
                                    <div class="uploader-list" id="coverImg">
                                        {notempty name="$info.photo"}
                                        <div class="file-items">
                                            <div class="handle" data-flag="photo" data-path="{$info.photo}"><i class="layui-icon layui-icon-delete"></i></div>
                                            <img src="{$info.photo}">
                                        </div>
                                        {/notempty}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="photo" id="photo" value="{$info.photo}">
                </div>

                <!--<div class="layui-form-item">
                    <label class="layui-form-label">Twitter</label>
                    <div class="layui-input-block">
                        <input type="text" name="twitter" id="twitter" value="{$info.twitter}" class="layui-input" placeholder="请输入链接">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">facebook</label>
                    <div class="layui-input-block">
                        <input type="text" name="facebook" id="facebook" value="{$info.facebook}" class="layui-input" placeholder="请输入链接">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">ins</label>
                    <div class="layui-input-block">
                        <input type="text" name="ins" id="ins" value="{$info.ins}" class="layui-input" placeholder="请输入链接">
                    </div>
                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" id="sort" value="{$info.sort}" class="layui-input" placeholder="请输入排序，数字越小，排序越靠前">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" id="status" {if $info.status == 1}checked{/if} lay-text="显示|隐藏" lay-skin="switch">
                        <input type="checkbox" name="is_recommended" id="is_recommended" {if $info.is_recommended == 1}checked{/if} lay-text="推荐|推荐" lay-skin="switch">
                    </div>
                </div>

                <div class="btn-block">
                    <button type="button" onclick="sendEmployeeForm()" class="layui-btn layui-btn-normal"><i class="fa fa-check"></i>提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['form','upload'],function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload

        uploadTemplate('#uploadCover','#coverImg','#photo','photo','photoLoad')

        function uploadTemplate(btn,preview,value,flag,load){
            upload.render({
                elem: btn,
                url: "{:url('employee/upload')}",
                multiple: false,
                accept: 'file',
                size: uploadFileSize,
                acceptMime: uploadImgExt,
                before: function (obj) {
                    $(btn).addClass('upload-btn-hide')
                    $(preview).empty()
                    load = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
                },
                done: function (res) {
                    layer.close(load)//关闭遮罩层
                    sucMsg(res.msg)
                    if (res.code == 'suc') {
                        $(preview).append(
                            '<div class="file-items">' +
                            '<div class="handle" data-flag="'+flag+'" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img class="cover-preview" src="' + res.url + '">' +
                            '</div>'
                        );

                        $(value).val(res.url)
                    } else {
                        $(btn).removeClass('upload-btn-hide')
                    }
                }
            })
        }

    });

    //删除图片
    $(document).on("click",".file-items .handle", function (event) {
        //标记
        let flag = $(this).attr('data-flag')

        $('#uploadCover').removeClass('upload-btn-hide')//显示上传按钮
        $("#photo").val("")
        $(this).parent().remove();
    })

    function sendEmployeeForm() {
        //弹出遮罩层，防止多次点击
        var employeeEditLoad = layer.load(1,{shade:[0.5,'#FFF'],time:0})
        let data = $("#employeeFormData").serialize()
        ajaxRequest("{:url('employee/edit')}",data,function (res) {
            if (res.code == 'suc'){
                sucMsg(res.msg,function () {
                    //刷新父级页面
                    parent.layui.table.reload('employeeList')
                    //关闭遮罩层
                    layer.close(employeeEditLoad)
                    //关闭当前弹出层
                    xadmin.close()
                })
            }else {
                errMsg(res.msg,function () {
                    //关闭遮罩层
                    layer.close(employeeEditLoad)
                })
            }
        })
    }
</script>